﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "工单详情";
}
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/layui/css/layui.css" rel="stylesheet" />

<script src="~/layui/layui.js"></script>
<script src="~/js/site.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- 工单详情页面 -->
            <div class="work-order-detail">
                <!-- 头部区域 -->
                <div class="detail-header">
                    <div class="header-left">
                        <h2 class="work-order-title" id="workOrderTitle">工单详情</h2>
                    </div>
                    <div class="header-right">
                        <div class="status-section">
                            <div class="status-badge" id="statusBadge">
                                <span class="status-text">已下达</span>
                            </div>
                        </div>
                        <button type="button" class="btn btn-info btn-sm ml-2" id="btnDebug" onclick="debugPage()">
                            <i class="layui-icon layui-icon-search"></i> 调试
                        </button>
                    </div>
                </div>

                <!-- 标签页导航 -->
                <div class="tab-navigation">
                    <ul class="nav nav-tabs" id="detailTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="basic-info-tab" data-bs-toggle="tab" data-bs-target="#basic-info" type="button" role="tab" aria-controls="basic-info" aria-selected="true">
                                工单信息
                            </button>
                        </li>

                        <li class="nav-item" role="presentation" style="display: none;">
                            <button class="nav-link" id="report-records-tab" data-bs-toggle="tab" data-bs-target="#report-records" type="button" role="tab" aria-controls="report-records" aria-selected="false">
                                报工记录
                            </button>
                        </li>
                        <li class="nav-item" role="presentation" style="display: none;">
                            <button class="nav-link" id="operation-records-tab" data-bs-toggle="tab" data-bs-target="#operation-records" type="button" role="tab" aria-controls="operation-records" aria-selected="false">
                                操作记录
                            </button>
                        </li>
                    </ul>
                </div>

                <!-- 标签页内容 -->
                <div class="tab-content" id="detailTabContent">
                    <!-- 工单信息标签页 -->
                    <div class="tab-pane fade show active" id="basic-info" role="tabpanel" aria-labelledby="basic-info-tab">
                        <div class="detail-content">
                            <!-- 页面内容将由JavaScript动态填充 -->
                        </div>
                    </div>

                    <!-- 报工记录标签页 -->
                    <div class="tab-pane fade" id="report-records" role="tabpanel" aria-labelledby="report-records-tab">
                        <div class="detail-content">
                            <!-- 内容将通过JavaScript动态生成 -->
                        </div>
                    </div>

                    <!-- 操作记录标签页 -->
                    <div class="tab-pane fade" id="operation-records" role="tabpanel" aria-labelledby="operation-records-tab">
                        <div class="detail-content">
                            <div class="empty-content">
                                <i class="layui-icon layui-icon-face-cry"></i>
                                <p>操作记录功能待实现</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 报工对话框 -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">报工</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 工序信息 -->
                <div class="process-info mb-3">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label">工序编号:</label>
                            <span class="form-control-plaintext" id="processCode">-</span>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">加工顺序:</label>
                            <span class="form-control-plaintext" id="processOrder">-</span>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">负责人ID:</label>
                            <span class="form-control-plaintext" id="processLeader">-</span>
                        </div>
                    </div>
                </div>

                <!-- 报工条目操作 -->
                <div class="report-actions mb-3">
                    <button type="button" class="btn btn-primary btn-sm" id="btnAddEntry">
                        <i class="layui-icon layui-icon-add-1"></i> 添加
                    </button>
                    <button type="button" class="btn btn-warning btn-sm" id="btnRemoveEntry">
                        <i class="layui-icon layui-icon-delete"></i> 移除
                    </button>
                </div>

                <!-- 报工条目表格 -->
                <div class="table-responsive">
                    <table class="table table-bordered" id="reportEntryTable">
                        <thead class="thead-light">
                            <tr>
                                <th width="50">
                                    <input type="checkbox" id="selectAll" class="form-check-input">
                                </th>
                                <th width="60">序号</th>
                                <th>人员</th>
                                <th>报工数量</th>
                            </tr>
                        </thead>
                        <tbody id="reportEntryTableBody">
                            <!-- 报工条目将在这里动态生成 -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btnSubmitReport">确定</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        console.log('页面初始化开始');
        
        // 检查必要的元素是否存在
        if (!$('#workOrderTitle').length) {
            console.error('页面元素未正确加载');
            return;
        }
        
        // 获取URL参数中的工单ID
        const urlParams = new URLSearchParams(window.location.search);
        const workOrderId = urlParams.get('id');
        
        console.log('URL参数中的工单ID:', workOrderId);
        
        if (workOrderId) {
            loadWorkOrderDetail(workOrderId);
        } else {
            showError('未找到工单ID参数，请检查URL是否正确');
        }

        // 绑定事件
        bindEvents();
        
        // 确保报工记录标签页有初始内容
        initializeReportTab();
        
        // 页面加载完成后的状态检查
        setTimeout(function() {
            console.log('=== 页面加载完成状态检查 ===');
            console.log('当前工单信息:', currentWorkOrder);
            console.log('报工记录标签页元素:', $('#report-records-tab').length);
            console.log('报工记录内容区域:', $('#report-records .detail-content').length);
            console.log('==================');
        }, 1000);
        
        console.log('页面初始化完成');

        // 加载工单详情
        function loadWorkOrderDetail(id) {
            console.log('开始加载工单详情，ID:', id);
            showLoading();
            
            // 使用专门的API接口获取单个工单详情
            $.ajax({
                url: `http://localhost:5025/api/Production/GetWorkOrderOne?WorkOrderId=${id}`,
                type: 'GET',
                timeout: 10000, // 10秒超时
                success: function (response) {
                    console.log('API响应:', response);
                    console.log('响应状态码:', response.code);
                    console.log('响应数据:', response.data);
                    
                    if (response.code === 200 && response.data) {
                        const workOrder = response.data;
                        console.log('找到的工单详情:', workOrder);
                        console.log('工单数据类型:', typeof workOrder);
                        console.log('工单数据是否为数组:', Array.isArray(workOrder));
                        
                        // 渲染工单详情
                        renderWorkOrderDetail(workOrder);
                        
                        // 如果产品信息在工单数据中，直接使用
                        if (workOrder.productId) {
                            console.log('产品ID存在:', workOrder.productId);
                            // 如果工单数据中已经包含产品信息，直接渲染
                            if (workOrder.productName && workOrder.productName !== 'string') {
                                console.log('使用工单数据中的产品信息');
                                renderProductInfo(workOrder);
                            } else {
                                console.log('调用产品信息API');
                                // 否则调用产品信息API
                                loadProductInfo(workOrder.productId);
                            }
                        } else {
                            console.log('产品ID不存在');
                        }
                        
                        // 注意：不需要在这里调用hideLoading()，因为renderWorkOrderDetail已经处理了
                    } else {
                        console.log('API响应失败或数据为空');
                        showError('加载工单信息失败：' + (response.msg || '未知错误'));
                        hideLoading();
                    }
                },
                error: function (xhr, status, error) {
                    console.error('API请求失败:', {xhr, status, error});
                    
                    hideLoading();
                    let errorMsg = '请求失败';
                    if (xhr.status === 0) {
                        errorMsg = '无法连接到服务器，请检查后端服务是否启动';
                    } else if (xhr.status === 404) {
                        errorMsg = 'API接口不存在，请检查后端配置';
                    } else if (xhr.status === 500) {
                        errorMsg = '服务器内部错误';
                    } else {
                        errorMsg += '：' + error;
                    }
                    showError(errorMsg);
                }
            });
        }

       
        // 加载产品信息
        function loadProductInfo(productId) {
            if (!productId) {
                $('#productName').text('-');
                $('#productCode').text('-');
                $('#specification').text('-');
                $('#unitName').text('-');
                $('#classify').text('-');
                return;
            }

            $.ajax({
                url: 'http://localhost:5025/api/Production/GetProductItem',
                type: 'GET',
                timeout: 5000,
                success: function (response) {
                    if (response.code === 200) {
                        // 使用正确的属性名称查找产品
                        const product = response.data.find(item => item.ProductId == productId);
                        if (product) {
                            renderProductInfo(product);
                        } else {
                            // 如果找不到产品，显示默认值
                            $('#productName').text('-');
                            $('#productCode').text('-');
                            $('#specification').text('-');
                            $('#unitName').text('-');
                            $('#classify').text('-');
                        }
                    } else {
                        console.log('加载产品信息失败：' + response.msg);
                    }
                },
                error: function (xhr, status, error) {
                    console.log('请求产品信息失败：' + error);
                    // 产品信息加载失败不影响主页面显示
                }
            });
        }

        // 渲染工单详情
        function renderWorkOrderDetail(data) {
            // 保存当前工单信息
            updateCurrentWorkOrder(data);
            
            // 设置工单标题（支持多种命名方式）
            $('#workOrderTitle').text(data.workOrderName || data.workordername || '工单详情');
            
            // 更新状态徽章
            if (data.workorderState || data.workorderstate) {
                updateStatusBadge(data.workorderState || data.workorderstate);
            }
            
            // 先隐藏加载状态，创建HTML结构
            hideLoading();
            
            // 然后更新页面上的数据字段
            updatePageFields(data);
        }

        // 渲染产品信息
        function renderProductInfo(product) {
            // 使用API返回的字段名（支持多种命名方式）
            $('#productName').text(product.productName || product.productname || '-');
            $('#productCode').text(product.productCode || product.productcode || '-');
            $('#specification').text(product.specification || '-');
            $('#unitName').text(product.unitName || product.unitname || '-');
            $('#classify').text(product.classify || '-');
            
            // 同时更新重复的字段
            $('#specification2').text(product.specification || '-');
            $('#classify2').text(product.classify || '-');
            
            console.log('产品信息渲染完成:', product);
        }

        // 更新状态徽章
        function updateStatusBadge(state) {
            console.log('更新状态徽章，状态值:', state);
            
            const statusMap = {
                1: { text: '已下达', class: 'status-issued' },
                2: { text: '已上线', class: 'status-online' },
                3: { text: '已完成', class: 'status-completed' },
                4: { text: '已取消', class: 'status-cancelled' }
            };
            
            const status = statusMap[state] || { text: '未知', class: 'status-unknown' };
            console.log('状态映射结果:', status);
            
            $('#statusBadge').removeClass().addClass('status-badge ' + status.class);
            $('#statusBadge .status-text').text(status.text);
        }

        // 格式化日期时间
        function formatDateTime(dateTimeString) {
            if (!dateTimeString) return '-';
            const date = new Date(dateTimeString);
            return date.toLocaleString('zh-CN', { 
                year: 'numeric', 
                month: '2-digit', 
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }

        // 绑定事件
        function bindEvents() {
            // 报工记录相关事件
            bindReportEvents();
        }



        // 显示加载状态
        function showLoading() {
            $('.detail-content').html(`
                <div class="text-center" style="padding: 60px 20px;">
                    <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 32px; color: #007bff; margin-bottom: 15px;"></i>
                    <div style="font-size: 16px; color: #6c757d;">正在加载工单信息...</div>
                    <div style="font-size: 14px; color: #adb5bd; margin-top: 10px;">请稍候</div>
                </div>
            `);
        }

        // 隐藏加载状态
        function hideLoading() {
            // 隐藏加载状态，显示实际内容
            $('.detail-content').empty();
            
            // 恢复页面内容结构
            $('#basic-info .detail-content').html(`
                <!-- 基础信息 -->
                <div class="info-section">
                    <div class="section-header">
                        <i class="section-icon">◆</i>
                        <h4>基础信息</h4>
                    </div>
                    <div class="section-content">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">工单编号:</label>
                                    <span class="info-value" id="workOrderCode">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">单据时间:</label>
                                    <span class="info-value" id="workOrderDate">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">销售订单:</label>
                                    <span class="info-value">无</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">负责人:</label>
                                    <span class="info-value" id="leaderName">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">备注:</label>
                                    <span class="info-value" id="workOrderDesc">-</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">工单名称:</label>
                                    <span class="info-value" id="workOrderName">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">关联生产单号:</label>
                                    <span class="info-value">SCDH2564</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">关联项目:</label>
                                    <span class="info-value">项目一</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">所属部门:</label>
                                    <span class="info-value">部门一</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 生产物品 -->
                <div class="info-section">
                    <div class="section-header">
                        <i class="section-icon">◆</i>
                        <h4>生产物品</h4>
                    </div>
                    <div class="section-content">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">产品名称:</label>
                                    <span class="info-value" id="productName">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">规格型号:</label>
                                    <span class="info-value" id="specification">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">物品类别:</label>
                                    <span class="info-value" id="classify">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">计划产量:</label>
                                    <span class="info-value" id="orderNum">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">计划结束时间:</label>
                                    <span class="info-value" id="planEnd">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">实际结束时间:</label>
                                    <span class="info-value" id="actualEnd">-</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">产品编号:</label>
                                    <span class="info-value" id="productCode">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">规格型号:</label>
                                    <span class="info-value" id="specification2">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">单位:</label>
                                    <span class="info-value" id="unitName">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">物品分类:</label>
                                    <span class="info-value" id="classify2">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">计划开始时间:</label>
                                    <span class="info-value" id="planStart">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">实际开始时间:</label>
                                    <span class="info-value" id="actualStart">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">合格数量:</label>
                                    <span class="info-value" id="qualifiedQuantity">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `);
        }
        
        // 恢复页面内容区域
        function restorePageContent() {
            // 重新创建工单信息标签页的内容结构
            $('#basic-info .detail-content').html(`
                <!-- 基础信息 -->
                <div class="info-section">
                    <div class="section-header">
                        <i class="section-icon">◆</i>
                        <h4>基础信息</h4>
                    </div>
                    <div class="section-content">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">工单编号:</label>
                                    <span class="info-value" id="workOrderCode">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">单据时间:</label>
                                    <span class="info-value" id="workOrderDate">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">销售订单:</label>
                                    <span class="info-value">无</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">负责人:</label>
                                    <span class="info-value" id="leaderName">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">备注:</label>
                                    <span class="info-value" id="workOrderDesc">-</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">工单名称:</label>
                                    <span class="info-value" id="workOrderName">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">关联生产单号:</label>
                                    <span class="info-value">SCDH2564</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">关联项目:</label>
                                    <span class="info-value">项目一</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">所属部门:</label>
                                    <span class="info-value">部门一</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 生产物品 -->
                <div class="info-section">
                    <div class="section-header">
                        <i class="section-icon">◆</i>
                        <h4>生产物品</h4>
                    </div>
                    <div class="section-content">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">产品名称:</label>
                                    <span class="info-value" id="productName">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">规格型号:</label>
                                    <span class="info-value" id="specification">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">物品类别:</label>
                                    <span class="info-value" id="classify">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">计划产量:</label>
                                    <span class="info-value" id="orderNum">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">计划结束时间:</label>
                                    <span class="info-value" id="planEnd">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">实际结束时间:</label>
                                    <span class="info-value" id="actualEnd">-</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">产品编号:</label>
                                    <span class="info-value" id="productCode">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">规格型号:</label>
                                    <span class="info-value" id="specification2">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">单位:</label>
                                    <span class="info-value" id="unitName">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">物品分类:</label>
                                    <span class="info-value" id="classify2">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">计划开始时间:</label>
                                    <span class="info-value" id="planStart">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">实际开始时间:</label>
                                    <span class="info-value" id="actualStart">-</span>
                                </div>
                                <div class="info-item">
                                    <label class="info-label">合格数量:</label>
                                    <span class="info-value" id="qualifiedQuantity">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `);
            
            console.log('页面内容结构已恢复');
        }

        // 显示错误信息
        function showError(message) {
            $('.detail-content').html(`
                <div class="text-center" style="padding: 60px 20px;">
                    <i class="layui-icon layui-icon-face-cry" style="font-size: 48px; color: #dc3545; margin-bottom: 20px;"></i>
                    <div style="font-size: 16px; color: #dc3545; margin-bottom: 10px;">加载失败</div>
                    <div style="font-size: 14px; color: #6c757d;">${message}</div>
                    <button type="button" class="btn btn-primary mt-3" onclick="location.reload()">
                        <i class="layui-icon layui-icon-refresh"></i> 重新加载
                    </button>
                </div>
            `);
        }











        // 更新当前工单信息
        function updateCurrentWorkOrder(workOrder) {
            currentWorkOrder = workOrder;
            console.log('当前工单信息已更新:', currentWorkOrder);
        }

        // 报工相关变量
        let currentWorkOrder = null;
        let processData = null;
        let reportEntries = [];

        // 绑定报工记录相关事件
        function bindReportEvents() {
            // 新增报工按钮
            $('#btnAddReport').click(function () {
                openReportModal();
            });

            // 刷新报工记录按钮
            $('#btnRefreshReport').click(function () {
                loadReportRecords();
            });

            // 调试数据按钮
            $('#btnDebugData').click(function () {
                console.log('=== 调试数据 ===');
                console.log('当前工单信息:', currentWorkOrder);
                console.log('工序数据:', processData);
                console.log('报工条目:', reportEntries);
                console.log('报工条目数量:', reportEntries.length);
                
                if (reportEntries.length > 0) {
                    reportEntries.forEach((entry, index) => {
                        console.log(`条目${index + 1}:`, {
                            id: entry.id,
                            person: entry.person,
                            quantity: entry.quantity,
                            personValid: !!entry.person,
                            quantityValid: entry.quantity && entry.quantity > 0
                        });
                    });
                }
                
                // 显示当前表单值
                $('.person-select').each(function() {
                    const id = $(this).data('id');
                    const value = $(this).val();
                    console.log(`人员选择器 ${id}:`, value);
                });
                
                $('.quantity-input').each(function() {
                    const id = $(this).data('id');
                    const value = $(this).val();
                    console.log(`数量输入框 ${id}:`, value);
                });
            });

            // 添加报工条目按钮
            $('#btnAddEntry').click(function () {
                addReportEntry();
            });

            // 移除报工条目按钮
            $('#btnRemoveEntry').click(function () {
                removeSelectedEntries();
            });

            // 全选复选框
            $('#selectAll').change(function () {
                const isChecked = $(this).prop('checked');
                $('.entry-checkbox').prop('checked', isChecked);
            });

            // 提交报工按钮
            $('#btnSubmitReport').click(function () {
                submitReport();
            });

            // 标签页切换事件 - 修复Bootstrap版本兼容性问题
            $('#report-records-tab').on('click', function () {
                // 延迟执行，确保标签页切换完成
                setTimeout(function() {
                    if ($('#report-records-tab').hasClass('active')) {
                        loadReportRecords();
                    }
                }, 100);
            });

            // 兼容Bootstrap 5的标签页事件
            $('#report-records-tab').on('shown.bs.tab', function () {
                loadReportRecords();
            });

            // 兼容Bootstrap 4的标签页事件
            $('#report-records-tab').on('shown.bs.tab', function () {
                loadReportRecords();
            });
        }

        // 打开报工对话框
        function openReportModal() {
            if (!currentWorkOrder) {
                layer.msg('工单信息未加载', { icon: 2, time: 2000 });
                return;
            }
            
            // 加载工序信息
            loadProcessData();
            
            // 重置报工条目
            reportEntries = [];
            renderReportEntries();
            
            $('#reportModal').modal('show');
        }

        // 加载工序数据
        function loadProcessData() {
            if (!currentWorkOrder || !currentWorkOrder.workOrderId) {
                layer.msg('工单信息不完整，无法加载工序信息', { icon: 2, time: 2000 });
                return;
            }

            console.log('开始加载工序信息，工单ID:', currentWorkOrder.workOrderId);
            
            $.ajax({
                url: `http://localhost:5025/api/Production/GetProcessOne?WorkOrderId=${currentWorkOrder.workOrderId}`,
                type: 'GET',
                timeout: 10000,
                success: function (response) {
                    console.log('工序信息API响应:', response);
                    
                    if (response.code === 200 && response.data) {
                        processData = response.data;
                        displayProcessInfo(processData);
                        console.log('工序信息加载成功:', processData);
                    } else {
                        layer.msg('加载工序信息失败：' + (response.msg || '未知错误'), { icon: 2, time: 2000 });
                        console.error('工序信息API返回错误:', response);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('请求工序信息失败:', {xhr, status, error});
                    
                    let errorMsg = '请求工序信息失败';
                    if (xhr.status === 0) {
                        errorMsg = '无法连接到服务器，请检查后端服务是否启动';
                    } else if (xhr.status === 404) {
                        errorMsg = '工序信息API不存在，请检查后端配置';
                    } else if (xhr.status === 500) {
                        errorMsg = '服务器内部错误';
                    } else {
                        errorMsg += '：' + error;
                    }
                    
                    layer.msg(errorMsg, { icon: 2, time: 3000 });
                }
            });
        }

        // 显示工序信息
        function displayProcessInfo(process) {
            console.log('显示工序信息:', process);
            
            // 只显示三个必要字段
            $('#processCode').text(process.processCode || '-');
            $('#processOrder').text(process.order || '-');
            $('#processLeader').text(process.leaderId || '-');
            
            console.log('工序信息显示完成');
        }



        // 添加报工条目
        function addReportEntry() {
            const entry = {
                id: Date.now(),
                person: '',
                quantity: ''
            };
            reportEntries.push(entry);
            console.log('添加新报工条目:', entry);
            renderReportEntries();
        }

        // 移除选中的报工条目
        function removeSelectedEntries() {
            const selectedIds = [];
            $('.entry-checkbox:checked').each(function () {
                selectedIds.push(parseInt($(this).val()));
            });

            if (selectedIds.length === 0) {
                layer.msg('请选择要移除的条目', { icon: 2, time: 2000 });
                return;
            }

            reportEntries = reportEntries.filter(entry => !selectedIds.includes(entry.id));
            renderReportEntries();
            $('#selectAll').prop('checked', false);
            
            console.log('已移除选中的报工条目，剩余条目数:', reportEntries.length);
        }

        // 渲染报工条目
        function renderReportEntries() {
            const tbody = $('#reportEntryTableBody');
            tbody.empty();

            if (reportEntries.length === 0) {
                tbody.append('<tr><td colspan="4" class="text-center text-muted">暂无报工条目</td></tr>');
                return;
            }

            reportEntries.forEach((entry, index) => {
                const row = `
                    <tr>
                        <td>
                            <input type="checkbox" class="form-check-input entry-checkbox" value="${entry.id}">
                        </td>
                        <td>${index + 1}</td>

                        <td>
                            <select class="form-select form-select-sm person-select" 
                                    data-id="${entry.id}">
                                <option value="">请选择人员</option>
                                <option value="张三" ${entry.person === '张三' ? 'selected' : ''}>张三</option>
                                <option value="李四" ${entry.person === '李四' ? 'selected' : ''}>李四</option>
                                <option value="王五" ${entry.person === '王五' ? 'selected' : ''}>王五</option>
                                <option value="赵六" ${entry.person === '赵六' ? 'selected' : ''}>赵六</option>
                            </select>
                        </td>
                        <td>
                            <input type="number" class="form-control form-control-sm quantity-input" 
                                   data-id="${entry.id}" placeholder="请输入" min="1" value="${entry.quantity || ''}">
                        </td>
                    </tr>
                `;
                tbody.append(row);
            });

            // 绑定输入事件
            bindEntryEvents();
        }

        // 绑定报工条目事件
        function bindEntryEvents() {
            // 人员选择事件 - 使用多种事件确保触发
            $(document).on('change', '.person-select', function () {
                const id = parseInt($(this).data('id'));
                const value = $(this).val();
                const entry = reportEntries.find(e => e.id === id);
                if (entry) {
                    entry.person = value;
                    console.log('人员选择更新:', {id, value, entry});
                }
            });

            // 数量输入事件 - 使用多种事件确保触发
            $(document).on('input change blur', '.quantity-input', function () {
                const id = parseInt($(this).data('id'));
                const value = $(this).val();
                const entry = reportEntries.find(e => e.id === id);
                if (entry) {
                    entry.quantity = value;
                    console.log('数量输入更新:', {id, value, entry});
                }
            });

            console.log('报工条目事件绑定完成');
        }

        // 提交报工
        function submitReport() {
            console.log('=== 开始验证报工信息 ===');
            console.log('当前报工条目数量:', reportEntries.length);
            console.log('报工条目详情:', reportEntries);
            
            // 验证报工条目
            if (reportEntries.length === 0) {
                layer.msg('请至少添加一个报工条目', { icon: 2, time: 2000 });
                return;
            }

            // 详细检查每个条目
            reportEntries.forEach((entry, index) => {
                console.log(`条目${index + 1}:`, {
                    id: entry.id,
                    person: entry.person,
                    quantity: entry.quantity,
                    personValid: !!entry.person,
                    quantityValid: entry.quantity && entry.quantity > 0
                });
            });

            const invalidEntries = reportEntries.filter(entry => 
                !entry.person || !entry.quantity || entry.quantity <= 0
            );

            console.log('无效条目:', invalidEntries);
            console.log('无效条目数量:', invalidEntries.length);

            if (invalidEntries.length > 0) {
                layer.msg('请完善所有报工条目的信息（人员、数量）', { icon: 2, time: 2000 });
                return;
            }

            if (!processData) {
                layer.msg('工序信息未加载', { icon: 2, time: 2000 });
                return;
            }

            console.log('准备提交报工，工序信息:', processData);
            console.log('报工条目:', reportEntries);

            // 根据加工顺序决定提交方式
            if (processData.order > 1) {
                // 批量插入：只需要第一个条目的数量，人员名称由后端生成
                const reportData = {
                    processId: processData.processId,
                    reportQuantity: parseInt(reportEntries[0].quantity),
                    name: "string" // 后端会根据order自动生成人员名称
                };
                console.log('批量报工数据:', reportData);
                submitReportData(reportData);
            } else if (processData.order === 1) {
                // 单个人报工：使用第一个条目的信息
                const reportData = {
                    processId: processData.processId,
                    reportQuantity: parseInt(reportEntries[0].quantity),
                    name: reportEntries[0].person
                };
                console.log('单人报工数据:', reportData);
                submitReportData(reportData);
            } else {
                layer.msg('加工顺序无效', { icon: 2, time: 2000 });
            }
        }

        // 提交报工数据到后端
        function submitReportData(reportData) {
            console.log('准备提交报工数据:', reportData);
            
            $.ajax({
                url: 'http://localhost:5025/api/Production/AddReport',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(reportData),
                timeout: 10000,
                success: function (response) {
                    console.log('报工API响应:', response);
                    
                    if (response.code === 200) {
                        layer.msg('报工成功！', { icon: 1, time: 2000 });
                        $('#reportModal').modal('hide');
                        loadReportRecords(); // 刷新报工记录
                    } else {
                        layer.msg('报工失败：' + (response.msg || '未知错误'), { icon: 2, time: 3000 });
                        console.error('报工API返回错误:', response);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('报工请求失败:', {xhr, status, error});
                    
                    let errorMsg = '报工请求失败';
                    if (xhr.responseJSON && xhr.responseJSON.msg) {
                        errorMsg += '：' + xhr.responseJSON.msg;
                    } else if (xhr.status === 0) {
                        errorMsg = '无法连接到服务器，请检查后端服务是否启动';
                    } else if (xhr.status === 404) {
                        errorMsg = '报工API不存在，请检查后端配置';
                    } else if (xhr.status === 500) {
                        errorMsg = '服务器内部错误';
                    } else {
                        errorMsg += '：' + error;
                    }
                    
                    layer.msg(errorMsg, { icon: 2, time: 3000 });
                }
            });
        }

        // 加载报工记录
        function loadReportRecords() {
            console.log('开始加载报工记录');
            
            if (!currentWorkOrder) {
                console.log('当前工单信息不存在，无法加载报工记录');
                showReportError('工单信息未加载，无法获取报工记录');
                return;
            }

            showReportLoading();
            
            // 调用后端API获取报工记录
            $.ajax({
                url: `http://localhost:5025/api/Production/GetReportRecords?WorkOrderId=${currentWorkOrder.workOrderId}`,
                type: 'GET',
                timeout: 10000,
                success: function (response) {
                    console.log('报工记录API响应:', response);
                    hideReportLoading();
                    
                    if (response.code === 200 && response.data) {
                        renderReportRecords(response.data);
                    } else {
                        // 如果没有数据，显示空状态
                        showReportNoData();
                    }
                },
                error: function (xhr, status, error) {
                    console.error('获取报工记录失败:', error);
                    hideReportLoading();
                    
                    // 如果API不存在或失败，显示空状态
                    if (xhr.status === 404) {
                        showReportNoData();
                    } else {
                        showReportError('加载报工记录失败：' + error);
                    }
                }
            });
        }

        // 显示报工记录加载状态
        function showReportLoading() {
            $('#reportLoading').show();
            $('#reportTable').hide();
            $('#reportNoData').hide();
            $('#reportError').hide();
        }

        // 隐藏报工记录加载状态
        function hideReportLoading() {
            $('#reportLoading').hide();
        }

        // 显示报工记录错误状态
        function showReportError(message) {
            $('#reportLoading').hide();
            $('#reportTable').hide();
            $('#reportNoData').hide();
            $('#reportError').show().text(message);
        }

        // 显示报工记录无数据状态
        function showReportNoData() {
            $('#reportLoading').hide();
            $('#reportTable').hide();
            $('#reportError').hide();
            $('#reportNoData').show();
        }

        // 渲染报工记录
        function renderReportRecords(data) {
            console.log('开始渲染报工记录，数据:', data);
            
            const tbody = $('#reportTableBody');
            tbody.empty();

            if (!data || data.length === 0) {
                console.log('报工记录为空，显示无数据状态');
                $('#reportNoData').show();
                $('#reportTable').hide();
                return;
            }

            console.log('显示报工记录表格，记录数:', data.length);
            $('#reportNoData').hide();
            $('#reportTable').show();

            data.forEach((record, index) => {
                const row = `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${record.processCode || '-'}</td>
                        <td>${record.processName || '-'}</td>
                        <td>${record.order || '-'}</td>
                        <td>${record.leaderName || '-'}</td>
                        <td>${record.reportPerson || '-'}</td>
                        <td>${record.reportQuantity || '-'}</td>
                        <td>${formatDateTime(record.reportTime)}</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-info" onclick="viewReportDetail(${record.id})">
                                <i class="layui-icon layui-icon-search"></i> 查看
                            </button>
                        </td>
                    </tr>
                `;
                tbody.append(row);
            });
            
            console.log('报工记录渲染完成');
        }

        // 查看报工详情
        function viewReportDetail(id) {
            layer.msg('查看报工详情功能待实现', { icon: 1, time: 2000 });
        }



        // 检查数据结构兼容性
        function checkDataCompatibility(data) {
            console.log('=== 数据结构兼容性检查 ===');
            console.log('原始数据:', data);
            console.log('数据类型:', typeof data);
            console.log('是否为数组:', Array.isArray(data));
            
            // 输出所有可用的字段名
            if (data && typeof data === 'object') {
                console.log('可用的字段名:', Object.keys(data));
                console.log('字段值:', data);
            }
            
            if (Array.isArray(data)) {
                console.log('数据是数组，第一个元素:', data[0]);
                return data[0] || data;
            }
            
            // 根据API响应，字段名是小写的，直接使用原始数据
            console.log('使用原始数据，字段名保持小写');
            return data;
        }

        // 更新页面上的数据字段
        function updatePageFields(data) {
            console.log('开始更新页面字段，数据:', data);
            
            // 检查数据兼容性
            const compatibleData = checkDataCompatibility(data);
            
            // 输出所有可用的字段名和值，帮助调试
            console.log('=== 所有可用字段 ===');
            if (compatibleData && typeof compatibleData === 'object') {
                Object.keys(compatibleData).forEach(key => {
                    console.log(`${key}:`, compatibleData[key]);
                });
            }
            
            console.log('数据属性检查:');
            console.log('- workOrderId:', compatibleData.workOrderId || compatibleData.workorderid);
            console.log('- workOrderCode:', compatibleData.workOrderCode || compatibleData.workordercode);
            console.log('- workOrderName:', compatibleData.workOrderName || compatibleData.workordername);
            console.log('- workorderState:', compatibleData.workorderState || compatibleData.workorderstate);
            console.log('- leaderId:', compatibleData.leaderId || compatibleData.leaderid);
            console.log('- leaderName:', compatibleData.leaderName || compatibleData.leadername);
            console.log('- orderNum:', compatibleData.orderNum || compatibleData.ordernum);
            console.log('- workOrderDesc:', compatibleData.workOrderDesc || compatibleData.workorderdesc || compatibleData.worderOrderDesc);
            console.log('- workOrderDate:', compatibleData.workOrderDate || compatibleData.workorderdate);
            console.log('- productId:', compatibleData.productId || compatibleData.productid);
            console.log('- productName:', compatibleData.productName || compatibleData.productname);
            console.log('- productCode:', compatibleData.productCode || compatibleData.productcode);
            console.log('- specification:', compatibleData.specification);
            console.log('- unitName:', compatibleData.unitName || compatibleData.unitname);
            console.log('- classify:', compatibleData.classify);
            console.log('- planStart:', compatibleData.planStart || compatibleData.planstart);
            console.log('- planEnd:', compatibleData.planEnd || compatibleData.planend);
            console.log('- planNum:', compatibleData.planNum || compatibleData.plannum);
            
            // 检查页面元素是否存在
            console.log('=== 页面元素检查 ===');
            console.log('workOrderCode元素:', $('#workOrderCode').length > 0);
            console.log('workOrderName元素:', $('#workOrderName').length > 0);
            console.log('leaderName元素:', $('#leaderName').length > 0);
            console.log('orderNum元素:', $('#orderNum').length > 0);
            console.log('workOrderDate元素:', $('#workOrderDate').length > 0);
            console.log('workOrderDesc元素:', $('#workOrderDesc').length > 0);
            console.log('productName元素:', $('#productName').length > 0);
            console.log('productCode元素:', $('#productCode').length > 0);
            console.log('specification元素:', $('#specification').length > 0);
            console.log('unitName元素:', $('#unitName').length > 0);
            console.log('classify元素:', $('#classify').length > 0);
            console.log('planStart元素:', $('#planStart').length > 0);
            console.log('planEnd元素:', $('#planEnd').length > 0);
            console.log('planNum2元素:', $('#planNum2').length > 0);
            
            // 更新基础信息字段 - 根据实际API响应字段（小写）
            $('#workOrderCode').text(compatibleData.workOrderCode || compatibleData.workordercode || '-');
            $('#workOrderName').text(compatibleData.workOrderName || compatibleData.workordername || '-');
            $('#leaderName').text(compatibleData.leaderName || compatibleData.leadername || '-');
            $('#orderNum').text(compatibleData.orderNum || compatibleData.ordernum || '-');
            $('#workOrderDate').text(compatibleData.workOrderDate || compatibleData.workorderdate ? formatDateTime(compatibleData.workOrderDate || compatibleData.workorderdate) : '-');
            $('#workOrderDesc').text(compatibleData.workOrderDesc || compatibleData.workorderdesc || compatibleData.worderOrderDesc || '-');
            
            // 更新产品信息字段 - 根据WorkOrderDTO字段（小写）
            $('#productName').text(compatibleData.productName || compatibleData.productname || '-');
            $('#productCode').text(compatibleData.productCode || compatibleData.productcode || '-');
            $('#specification').text(compatibleData.specification || '-');
            $('#unitName').text(compatibleData.unitName || compatibleData.unitname || '-');
            $('#classify').text(compatibleData.classify || '-');
            
            // 同时更新重复的字段（如果有的话）
            $('#specification2').text(compatibleData.specification || '-');
            $('#classify2').text(compatibleData.classify || '-');
            
            // 更新计划时间字段 - 根据WorkOrderDTO字段（小写）
            $('#planStart').text(compatibleData.planStart || compatibleData.planstart ? formatDateTime(compatibleData.planStart || compatibleData.planstart) : '-');
            $('#planEnd').text(compatibleData.planEnd || compatibleData.planend ? formatDateTime(compatibleData.planEnd || compatibleData.planend) : '-');
            $('#planNum2').text(compatibleData.planNum || compatibleData.plannum || '-');
            
            // 更新其他字段
            $('#actualStart').text('-'); // 暂时没有数据
            $('#actualEnd').text('-');   // 暂时没有数据
            $('#qualifiedQuantity').text('-'); // 暂时没有数据
            
            console.log('页面字段更新完成');
        }

        // 显示模拟数据功能已移除，直接对接后端接口

        // 页面状态检查（用于调试）
        function checkPageStatus() {
            console.log('=== 页面状态检查 ===');
            console.log('当前工单:', currentWorkOrder);
            console.log('工序数据:', processData);
            console.log('报工条目:', reportEntries);
            console.log('页面元素检查:');
            console.log('- 工单标题:', $('#workOrderTitle').length > 0);
            console.log('- 工单编号:', $('#workOrderCode').length > 0);
            console.log('- 报工按钮:', $('#btnAddReport').length > 0);
            console.log('- 报工对话框:', $('#reportModal').length > 0);
            console.log('==================');
        }

        // 调试页面函数
        function debugPage() {
            console.log('=== 调试页面 ===');
            console.log('当前工单信息:', currentWorkOrder);
            console.log('页面元素检查:');
            console.log('- 工单标题元素:', $('#workOrderTitle').length > 0);
            console.log('- 工单标题文本:', $('#workOrderTitle').text());
            console.log('- 工单编号元素:', $('#workOrderCode').length > 0);
            console.log('- 工单编号文本:', $('#workOrderCode').text());
            console.log('- 工单名称元素:', $('#workOrderName').length > 0);
            console.log('- 工单名称文本:', $('#workOrderName').text());
            console.log('- 负责人元素:', $('#leaderName').length > 0);
            console.log('- 负责人文本:', $('#leaderName').text());
            console.log('- 备注元素:', $('#workOrderDesc').length > 0);
            console.log('- 备注文本:', $('#workOrderDesc').text());
            console.log('- 产品名称元素:', $('#productName').length > 0);
            console.log('- 产品名称文本:', $('#productName').text());
            console.log('==================');
            
            // 显示调试信息到页面
            alert(`调试信息已输出到控制台\n当前工单: ${JSON.stringify(currentWorkOrder, null, 2)}`);
        }

        // 初始化报工记录标签页
        function initializeReportTab() {
            // 确保报工记录标签页有初始内容
            $('#report-records .detail-content').html(`
                <!-- 报工记录工具栏 -->
                <div class="report-toolbar">
                    <div class="toolbar-left">
                        <h5 class="mb-0">报工记录</h5>
                    </div>
                    <div class="toolbar-right">
                        <button type="button" class="btn btn-primary btn-sm" id="btnAddReport">
                            <i class="layui-icon layui-icon-add-1"></i> 新增报工
                        </button>
                        <button type="button" class="btn btn-secondary btn-sm" id="btnRefreshReport">
                            <i class="layui-icon layui-icon-refresh"></i> 刷新
                        </button>
                        <button type="button" class="btn btn-info btn-sm" id="btnDebugData">
                            <i class="layui-icon layui-icon-search"></i> 调试数据
                        </button>

                    </div>
                </div>

                <!-- 报工记录表格 -->
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="reportTable">
                        <thead class="thead-light">
                            <tr>
                                <th width="60">序号</th>
                                <th>工序编号</th>
                                <th>工序名称</th>
                                <th>加工顺序</th>
                                <th>负责人</th>
                                <th>报工人员</th>
                                <th>报工数量</th>
                                <th>报工时间</th>
                                <th width="120">操作</th>
                            </tr>
                        </thead>
                        <tbody id="reportTableBody">
                            <!-- 数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>

                <!-- 加载状态 -->
                <div id="reportLoading" class="text-center" style="display: none;">
                    <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> 加载中...
                </div>

                <!-- 无数据提示 -->
                <div id="reportNoData" class="text-center text-muted" style="display: none;">
                    暂无报工记录
                </div>

                <!-- 错误提示 -->
                <div id="reportError" class="text-center text-danger" style="display: none;">
                    加载报工记录失败，请稍后重试
                </div>
            `);
            
            // 重新绑定报工记录相关事件
            bindReportEvents();
            
            // 添加手动触发加载的点击事件
            $('#report-records-tab').off('click.manual').on('click.manual', function() {
                console.log('手动点击报工记录标签页');
                // 延迟执行，确保标签页切换完成
                setTimeout(function() {
                    if ($('#report-records-tab').hasClass('active')) {
                        console.log('报工记录标签页已激活，开始加载数据');
                        loadReportRecords();
                    }
                }, 200);
            });
        }

        // 暴露调试函数到全局
        window.checkPageStatus = checkPageStatus;
        window.debugPage = debugPage;
    });
</script>

<style>
    .work-order-detail {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin: 20px;
        overflow: hidden;
    }

    /* 头部样式 */
    .detail-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px 30px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .header-left {
        flex: 1;
    }

    .work-order-title {
        margin: 0 0 10px 0;
        font-size: 24px;
        font-weight: 600;
    }

    .work-order-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 14px;
        opacity: 0.9;
    }

    .meta-item {
        display: flex;
        align-items: center;
    }

    .header-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 15px;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .status-section {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    .status-badge {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .status-issued {
        background: rgba(255, 193, 7, 0.2);
        border-color: #ffc107;
    }

    .status-online {
        background: rgba(13, 202, 240, 0.2);
        border-color: #0dcaf0;
    }

    .status-completed {
        background: rgba(25, 135, 84, 0.2);
        border-color: #198754;
    }

    .status-cancelled {
        background: rgba(220, 53, 69, 0.2);
        border-color: #dc3545;
    }

    .status-actions {
        display: flex;
        gap: 8px;
    }

    /* 标签页导航 */
    .tab-navigation {
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

    .nav-tabs {
        border-bottom: none;
        padding: 0 30px;
    }

    .nav-tabs .nav-link {
        border: none;
        color: #6c757d;
        padding: 15px 20px;
        font-weight: 500;
        border-radius: 0;
    }

    .nav-tabs .nav-link:hover {
        color: #495057;
        background: rgba(0, 123, 255, 0.1);
    }

    .nav-tabs .nav-link.active {
        color: #007bff;
        background: white;
        border-bottom: 3px solid #007bff;
    }

    /* 标签页内容 */
    .tab-content {
        padding: 30px;
    }

    .detail-content {
        min-height: 400px;
    }

    /* 信息区域 */
    .info-section {
        margin-bottom: 30px;
    }

    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e9ecef;
    }

    .section-icon {
        color: #007bff;
        font-size: 16px;
        margin-right: 10px;
    }

    .section-header h4 {
        margin: 0;
        color: #495057;
        font-weight: 600;
    }

    .section-content {
        padding: 0 10px;
    }

    .info-item {
        display: flex;
        margin-bottom: 15px;
        align-items: center;
    }

    .info-label {
        min-width: 120px;
        font-weight: 500;
        color: #6c757d;
        margin-right: 10px;
    }

    .info-value {
        color: #212529;
        font-weight: 400;
    }

    /* 空内容样式 */
    .empty-content {
        text-align: center;
        padding: 60px 20px;
        color: #6c757d;
    }

    .empty-content .layui-icon {
        font-size: 48px;
        margin-bottom: 20px;
        opacity: 0.5;
    }

    .empty-content p {
        margin: 0;
        font-size: 16px;
    }

    /* 按钮样式 */
    .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
    }

    .layui-icon {
        font-size: 12px;
        margin-right: 4px;
    }

    /* 报工记录样式 */
    .report-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }

    .toolbar-left h5 {
        margin: 0;
        color: #495057;
        font-weight: 600;
    }

    .toolbar-right {
        display: flex;
        gap: 10px;
    }

    .process-info {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }

    .process-info .form-label {
        font-weight: 500;
        color: #6c757d;
        margin-bottom: 5px;
    }

    .process-info .form-control-plaintext {
        color: #212529;
        font-weight: 400;
    }

    .report-actions {
        display: flex;
        gap: 10px;
    }

    .report-actions .btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    #reportEntryTable {
        margin-top: 15px;
    }

    #reportEntryTable th {
        background-color: #f8f9fa;
        border-color: #dee2e6;
        font-weight: 500;
        vertical-align: middle;
        font-size: 14px;
    }

    #reportEntryTable td {
        vertical-align: middle;
        padding: 8px;
    }

    .form-control-sm {
        font-size: 12px;
        padding: 4px 8px;
    }

    .entry-checkbox {
        margin: 0;
    }

    /* 报工记录表格样式 */
    #reportTable th {
        background-color: #f8f9fa;
        border-color: #dee2e6;
        font-weight: 500;
        vertical-align: middle;
        font-size: 14px;
    }

    #reportTable td {
        vertical-align: middle;
        padding: 8px;
    }

    #reportLoading, #reportNoData, #reportError {
        padding: 40px 0;
    }

    .layui-icon-loading {
        font-size: 24px;
        color: #007bff;
    }

    /* 响应式设计 */
    @@media (max-width: 768px) {
        .detail-header {
            flex-direction: column;
            gap: 20px;
        }

        .header-right {
            align-items: flex-start;
        }

        .work-order-meta {
            flex-direction: column;
            gap: 10px;
        }

        .nav-tabs {
            padding: 0 15px;
        }

        .tab-content {
            padding: 20px 15px;
        }

        .info-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .info-label {
            min-width: auto;
            margin-bottom: 5px;
        }
    }


</style>
